<template>
	<view class="container">
		<fixedIcon></fixedIcon>
		<view class="top">
			<van-sticky :offset-top="0">
				<view style="background-color: #fff;padding-bottom: 30rpx;padding-top:30rpx;">
					<van-search style="z-index: 10;" placeholder="搜索栏(类别/老师编号)" @click="goSearch"></van-search>
				</view>
			</van-sticky>
			<!-- <van-search style="z-index: 10;" placeholder="搜索栏(类别/老师编号)" @click="goSearch"></van-search> -->
			<van-swipe style="z-index: 10;" class="my-swipe" @change="onChange" :autoplay="3000"
				indicator-color="white">
				<van-swipe-item>
					<image :src="A1" mode="" style="width: 100%;" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<image :src="A2" style="width: 100%;" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<image :src="A3" style="width: 100%;" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<image :src="A4" style="width: 100%;" alt="" />
				</van-swipe-item>
			</van-swipe>
			<view class="fixedclass" :class="getclass()"></view>
		</view>
		<view style="padding: 15rpx">
			<!-- 真人配音 -->
			<view class="introduce">
				<img :src="Avatar" alt="" />
				<view class="introduce-right">
					<view class="text1">
						<view class="bold">真人配音</view>
						<view>累计提供配音超过<text class="special">753816</text>分钟</view>
					</view>
					<view class="text2">甄选真人好声音，央视、省级配音团队为您服务！</view>
				</view>
			</view>
			<!-- 步骤 -->
			<img :src="Image" style="width: 100%;" class="second-card" />
			<!-- 热门推荐 -->
			<view>
				<view class="select">
					<van-button :color="curActive===cur.id ? '#FBB20F' : ''" v-for="cur in btns"
						@click="selectOne(cur.id)" class="btnItem">{{cur.name}}</van-button>
				</view>
				<view class="curAudios">
					<view class="audio-card" v-for="(audio,index) in audioList">
						<image :src="audio.avatar" class="avatar"></image>
						<view class="card-left">
							<view class="audio-title">{{audio.title}}</view>
							<view class="jyms">简要描述</view>
						</view>
						<view class="card-right">
							<img src="/static/icon/bofangzanting.png" v-if="audio.id === isplay" class="icon"
								@click="pauseAudio" />
							<img src="/static/icon/bofang.png" class="icon" v-else @click="openAudio(audio)" />
							<img src="/static/icon/Star 7.png" class="icon" @click="collect" />
							<img src="/static/icon/Group 1002.png" class="icon" />
						</view>
					</view>
				</view>
			</view>
			<!-- 品牌 -->
			<view class="title">五颗星部分服务品牌：口碑源于专业</view>
			<view class="pinpai">
				<img :src="img" v-for="(img) in images" :key="img" />
			</view>
			<!-- 常见问题 -->
			<view class="title">常见问题</view>
			<commonQuestion />
		</view>
		<van-back-top bottom="150rpx" />
	</view>
</template>

<script>
	import swiperCard from "./components/swiperCard.vue"
	import A1 from '@/static/icon/A1.jpg'
	import A2 from '@/static/icon/A2.jpg'
	import A3 from '@/static/icon/A3.jpg'
	import A4 from '@/static/icon/A4.jpg'
	import Avatar from '@/static/icon/Group 952.png'
	import P1 from '@/static/icon/pp1.png'
	import P2 from '@/static/icon/pp2.png'
	import P3 from '@/static/icon/pp3.png'
	import P4 from '@/static/icon/pp4.png'
	import P5 from '@/static/icon/pp5.png'
	import P6 from '@/static/icon/pp6.png'
	import P7 from '@/static/icon/pp7.png'
	import P8 from '@/static/icon/pp8.png'
	import P9 from '@/static/icon/pp9.png'
	import P10 from '@/static/icon/pp10.png'
	import P11 from '@/static/icon/pp11.png'
	import P12 from '@/static/icon/pp12.png'
	import P13 from '@/static/icon/pp13.png'
	import P14 from '@/static/icon/pp14.png'
	import P15 from '@/static/icon/pp15.png'
	import Image from '@/static/icon/41de2836-06e9-4553-8dc7-d9042f046b84.png';
	import commonQuestion from '@/components/commonQuestion.vue'

	import {
		Swipe,
		SwipeItem
	} from 'vant';
	export default {
		components: {
			swiperCard,
			commonQuestion
		},
		data() {
			return {
				A1,
				A2,
				A3,
				A4,
				P1,
				P2,
				P3,
				P4,
				P5,
				P6,
				P7,
				P8,
				P9,
				P10,
				P11,
				P12,
				P13,
				P14,
				P15,
				Avatar,
				Image,
				index: 0,
				images: [P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15],
				btns: [{
					id: 1,
					name: '男声',
				}, {
					id: 2,
					name: '女声',
				}],
				audioList: [{
						id: 1,
						avatar: A1,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '406 博物馆（历史感讲故事）'
					},
					{
						id: 2,
						avatar: A1,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '001 最近的远方'
					},
					{
						id: 3,
						avatar: A2,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '002 青山二中示范校片'
					},
					{
						id: 4,
						avatar: A3,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '003 大阳电动车（大气自然））'
					},
					{
						id: 5,
						avatar: A4,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '004 季度样音（加乐）'
					},
					{
						id: 6,
						avatar: A4,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '005 人物范冬梅'
					},
					{
						id: 7,
						avatar: A3,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '006 宜兴紫砂样音'
					},
					{
						id: 8,
						avatar: A2,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '007 缘来自在此山中'
					}
				],
				curActive: 1,
				isplay: null,
				innerAudioContext: null,
			}
		},
		methods: {
			goRouter() {
				uni.switchTab({
					url: `/pages/myCollect/index?data=lyy`
				})
			},
			onChange(index) {
				this.index = index
				console.log(index)
			},
			getclass() {
				if (this.index == 0) {
					return 'bac1'
				} else if (this.index == 1) {
					return 'bac2'
				} else if (this.index == 2) {
					return 'bac3'
				} else {
					return 'bac4'
				}
			},
			selectOne(id) {
				this.curActive = id;
			},
			openAudio(audio) {
				if (this.innerAudioContext) {
					try {
						this.innerAudioContext.pause();
						this.innerAudioContext.destroy()
						this.innerAudioContext = null
					} catch (e) {
						//TODO handle the exception
					}
				}
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.isplay = audio.id;
				this.innerAudioContext.src = audio.src;
			},
			pauseAudio() {
				this.innerAudioContext.pause();
				this.isplay = null;
			},
			collect() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/searchPage/index'
				})
			}
		},
		onLoad(e) {

			console.log('onLoad')
		},
		onShow() {
			console.log('onShow')
		},
		created() {
			console.log('created')

		},
		mounted() {

			console.log('mounted')
		},
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #F5F5F5;
	}

	.top {
		padding-top: 10px;
		padding-bottom: 10px;
		position: relative;
	}

	.fixedclass {
		position: absolute;
		width: 100%;
		z-index: 9;
		top: 0;
		left: 0;
		height: 100%;
		background-image: url('@/static/icon/A1.jpg') !important;
		filter: blur(6px);
	}

	.bac1 {
		background-image: url('@/static/icon/A1.jpg') !important;
	}

	.bac2 {
		background-image: url('@/static/icon/A2.jpg') !important;
	}

	.bac3 {
		background-image: url('@/static/icon/A3.jpg') !important;
	}

	.bac4 {
		background-image: url('@/static/icon/A4.jpg') !important;
	}

	.my-swipe {
		height: 300rpx;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;
	}

	::v-deep .van-search {
		background-color: transparent;
		padding: 0;
		padding-left: 20rpx;
		width: 60%;
		// margin-bottom: 10px;
	}

	::v-deep .van-search__content {
		background-color: #f2f2f2;
		z-index: 10;
		border-radius: 20px;
	}

	/* 真人配音 */
	.introduce {
		display: flex;
		gap: 20rpx;
		/* margin: 15rpx; */

		img {
			width: 100rpx;
			height: 100rpx;
		}

		.introduce-right {
			display: flex;
			flex-direction: column;
			font-size: 22rpx;
			justify-content: space-around;

			.text1 {
				display: flex;
				gap: 20rpx;
				align-items: flex-end;

				.bold {
					font-size: 30rpx;
					font-weight: 500;
				}

				.special {
					color: #97BAF9;
				}
			}

			.text2 {
				color: #999;
			}
		}
	}

	.second-card {
		margin: 10rpx 0;
	}

	/* 热门推荐 */
	.select {
		display: flex;
		gap: 20rpx;
		margin: 20rpx 0;
	}

	.btnItem {
		flex: 1;
		height: 70rpx;
		color: #B0B0B9;
		font-weight: 500;
		font-size: 30rpx;
		background-color: #F5F5F5;
	}

	.curAudios {
		flex: 1;
		overflow: scroll;
	}

	.audio-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 10rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.card-left {
		flex: 1;
		overflow: hidden;
	}

	.card-right {
		display: flex;
		justify-content: flex-end;
		flex: 1;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.audio-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 10rpx;
	}

	.jyms {
		font-size: 24rpx;
		color: #B0B0B9;
	}

	.title {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 60rpx;
	}

	.pinpai {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 10rpx;

		img {
			width: 32%;
		}
	}

	::v-deep .van-back-top {
		color: #999;
		background-color: #fff;
	}
</style>